<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>

<%
	String contextPath = request.getContextPath();
	String path = request.getScheme() + "://" + request.getServerName()
			+ ":" + request.getServerPort() + contextPath;
	String listPath = path + "/admin/rel/relative/relative_list";
%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>



<!DOCTYPE HTML>

<html>
<head>
<title>云忆</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" type="text/css"
	href="<%=path%>/assets/css/main.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/assets/css/mainnew.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/assets/css/header.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->

</head>
<body>
	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Header -->
		<header id="header" class="alt"">

			<span class="logo"><img src="<%=path%>/images/cloud_icon.png"
				alt="云忆" style="max-width: 100px" /></span>
			<h1>云忆</h1>
			<p>
				一个记住过去，装满回忆的地方<br />
			</p>

		</header>

		<!-- Nav -->
		<nav id="nav">
			<ul>
				<li><a href="#intro" class="active">个人档</a></li>
				<li><a href="#first">档案列表</a></li>
				<li><a href="#second">添加档案</a></li>
				<li><a href="#cta" style="display: none">增值服务</a></li>
				<li><a href="#header">回到顶部</a></li>
			</ul>
		</nav>

		<!-- Main -->
		<div id="main">

			<!-- Introduction -->
			<section id="intro" class="main special">
				<div class="spotlight">
					<div class="content">
						<header class="major">
							<h2>${sessionScope.session_account_info.loginName}</h2>
							<ul class="actions">
								<li><a href="${t_virtualpath}/admin/user/personal/index"
									class="button">个人中心</a></li>
								<li><a href="<c:url value='/admin/home/logout'/>"
									class="button">退出</a></li>
							</ul>
					</div>

				</div>
			</section>

			<!-- First Section -->
			<section id="first" class="main special">
				<header class="major">
					<h2>档案列表</h2>
				</header>


				<section class="tiles" id="div4">
					<c:forEach begin="0" var="relative" items="${relatives}"
						varStatus="status">
						<article class="style${status.index}">
							<span class="image"> <img src="<%=path%>/images/pic01.jpg"
								alt="" />
							</span> <a href="${t_virtualpath}/admin/xln?num=${relative.relativeId}"
								class="button" target="_blank"">
								<h2>${relative.getName()}</h2>
								<div class="content">
									<p
										style="-webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;">${relative.relative_information}</p>
								</div>
							</a>
						</article>

					</c:forEach>
				</section>

			</section>

			<script>
				function fun(id) {

					var d = document.getElementById(id);
					if (d) {
						d.style.display = d.style.display == "none" ? "block"
								: "none";
					}

				}
			</script>
			<script>
				function hao(obj) {
					if (obj.value == "显示更多") {
						obj.value = "隐藏更多";
					} else {
						obj.value = "显示更多";
					}
				}
			</script>

			<!-- Second Section -->
			<section id="second" class="main special">
				<header class="major">
					<h2>添加档案</h2>
					<p>
						珍藏回忆<br /> 编辑档案，制作主页<br /> 让真情永存.
					</p>
				</header>
				<ul class="statistics">
					<li class="style1"><span class="icon fa-rmb"></span> <strong>999</strong>
						1G资料</li>
					<li class="style2"><span class="icon fa-car"></span> <strong>1999</strong>
						3G资料</li>
					<li class="style3"><span class="icon fa-plane"></span> <strong>4999</strong>
						10G资料</li>
					<li class="style4"><span class="icon fa-rocket"></span> <strong>9999</strong>
						40G+</li>
					<li class="style5"><span class="icon fa-diamond"></span> <strong>更多优惠</strong>
						敬请期待</li>
				</ul>
				<p class="content">云忆专业制作个人永久电子档案，是您值得信赖的伙伴.</p>
				<footer class="major">
					<ul class="actions">
						<li><a
							href="${t_virtualpath}/admin/rel/relative/relative_add"
							class="button">点击添加</a></li>
					</ul>
				</footer>
			</section>

			<!-- Get Started -->
			<section id="cta" class="main special" style="display: none">
				<header class="major">
					<h2>增值服务</h2>
					<p>
						购买装饰<br /> 既环保又真诚.
					</p>
				</header>
				<footer class="major">
					<ul class="actions">

						<li><a href="generic.html" class="button">点击购买</a></li>
					</ul>
				</footer>
			</section>
		</div>
		<footer id="footer">

			<section>
				<img src="<%=path%>/images/qrcode.png"></img>
			</section>

			<section>
				<h2>云忆-让记忆永存</h2>
				<dl class="alt">
					<dt>微信：</dt>
					<dd>我是微信服务号</dd>
					<dt>电话：</dt>
					<dd>我是电话</dd>
					<dt>邮箱：</dt>
					<dd>我是邮箱</dd>
					<dt>官网：</dt>
					<dd>
						<a href="<%=path%>/assets/index2.jsp">我是网址</a>
					</dd>
				</dl>
			</section>

			<div class="copyright">
				<ul class="menu">
					<p>&copy; Untitled. All rights reserved.云忆</p>
				</ul>
			</div>
		</footer>
	</div>
	<!-- Scripts -->
	<script src="${t_virtualpath}/assets/js/jquery.min.js"></script>
	<script src="${t_virtualpath}/assets/js/jquery.scrollex.min.js"></script>
	<script src="${t_virtualpath}/assets/js/jquery.scrolly.min.js"></script>
	<script src="${t_virtualpath}/assets/js/skel.min.js"></script>
	<script src="${t_virtualpath}/assets/js/util.js"></script>
	<!--[if lte IE 8]>
	<script src="assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="${t_virtualpath}/assets/js/main.js"></script>
</body>
</html>